<template>
  <div class="container">
    <el-row style="height:100%;">
      <el-col :span="6" style="height:100%;">
        <div class="tree-container">
          <h3>库位列表</h3>
          <el-input placeholder="输入库位名称进行过滤" v-model="treeFilter" class="tree-filter"/>
          <el-tree
            ref="tree"
            highlight-current
            default-expand-all
            node-key="id"
            :expand-on-click-node="false"
            :data="treeData"
            :props="defaultProps"
            :filter-node-method="handleTreeFilter"
            @node-click="handleTreeNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="18">
        <data-view
          ref="dataView"
          propViewKey="wm_replenish_kanban"
          propViewForm="base/location/detail.vue"
          :propInitData="selectedTreeNode"
          @after-save="handleAfterSave"
          @after-delete="handleAfterDelete"
          @extra-button-click="handleExtraButtonClick"
        />
      </el-col>
    </el-row>


    <el-dialog title="设置安全库存" width="55%" :visible.sync="dialogSafeStockVisible">
      <matr-select
        propUrl="/base/matr/list"
        :propMultiple="true"
        :propDisabled="propReadonly"
        propTrigger="click"
        @select="handleSelect"
      />
      <div style="max-height: 500px; overflow-y: auto">
        <data-view ref="safeStockDv" propViewKey="base_safe_stock" :propAutoFetchData="false"
                   :propHideQueryButton="true" :propHidePageSearch="false"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>

import MatrSelect from '@/components/base/MatrSelect'

export default {
  name: 'replenish',
  data() {
    return {
      treeData: [],
      treeFilter: '',
      selectedTreeNode: {},
      treeEntry: '/base/location/all',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dialogSafeStockVisible: false,
      selectedRow: null

    }
  },
  watch: {
    treeFilter(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    loadTree() {
      this.$ajax.get(this.treeEntry, {}).then(response => {
        if (response.code == 0) {
          this.treeData = global.utils.convertToTree(response.data, {
            rootNode: {id: 0, parentId: 0, name: '所有库位'},
            keyFieldName: 'id',
            parentFieldName: 'parentId',
            labelFieldName: 'name'
          }) // {CHECK_HERE}

          if (!this.selectedTreeNode.id) {
            this.selectedTreeNode = this.treeData[0]
          }
          this.$refs.tree.setCurrentKey(this.selectedTreeNode.id)
        } else {
          this.utilMessage.error(response.msg)
        }
      })
    },
    handleTreeNodeClick(data) {
      this.selectedTreeNode = data
      let wrapper = this.$newWrapper().eq('location_id', data.id)
      this.$refs.dataView.setQueryWrapper(wrapper)
    },
    handleTreeFilter(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleAfterSave(status, data) {
      this.loadTree()
    },
    handleAfterDelete() {
      this.loadTree()
    },
    handleExtraButtonClick({button, data}) {
      if (button.key == 'settingSafeStock') {
        this.dialogSafeStockVisible = true
        this.selectedRow = data
        this.$nextTick(() => {
          this.$refs.safeStockDv.setQueryWrapper(this.$newWrapper().eq('locationId', this.selectedRow.id))
        })
      }
    },
    handleSelect(items) {
      if (items.length == 0 || !this.selectedRow) {
        return
      }
      let params = {
        locationId: this.selectedRow.id,
        matrIdList: items.map(matr => matr.id)
      }
      this.$ajax.post('/base/safe_stock/settingSafeStock', params).then(resp => {
        this.utilMessage.success(resp.msg)
        this.$refs.safeStockDv.fetchData()
      })
    }
  },
  created() {
    this.loadTree()
  },
  props: {
    propReadonly: Boolean,
  },
  components: {
    MatrSelect
  },
}
</script>

<style lang="scss" scoped>
  .container {
    height: 100%;
    background-color: #fff;
  }

  .tree-container {
    padding: 10px;
    margin-right: 20px;
    border: solid 1px #DCDFE6;
    height: 100%;
    overflow:auto
  }

  .tree-filter {
    margin: 10px;
    width: 80%
  }
</style>
